<template>
  <div class="basic-profile-info">
    <el-form ref="ruleFormRef" :model="userInfoForm" :rules="rules" label-width="120px" class="demo-ruleForm">
      <!-- <el-form-item label="民族" prop="ethnicity">
        <el-select v-model="userInfoForm.ethnicity" filterable>
          <el-option v-for="item in ETHNICITY_LIST" :key="item" :label="item" :value="item" />
        </el-select>
      </el-form-item> -->
      <el-form-item label="用户昵称" prop="ethnicity">
        <el-input v-model="userInfoForm.nickName"></el-input>
      </el-form-item>
      <el-form-item label="用户邮箱" prop="ethnicity">
        <el-input v-model="userInfoForm.email"></el-input>
      </el-form-item>
      <el-form-item label="用户性别" prop="ethnicity">
        <el-select v-model="userInfoForm.sex" filterable>
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="手机号码" prop="ethnicity">
        <el-input v-model="userInfoForm.phonenumber"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="saveUserInfoHandler(ruleFormRef)">保存</el-button>
        <el-button @click="closeHandler">关闭</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import type { FormInstance, FormRules } from "element-plus";
import type { User } from "@/typings";
import { editUserProfileApi } from "@/api";
import { reactive, ref, onMounted, watch } from "vue";
import { useRoute } from "vue-router";
import { useKeepAliveStore, useTabsStore } from "@/stores";
import { ElMessage } from "element-plus";
import { emailVerify, phoneVerify } from "@/utils/formVerify";

defineOptions({
  name: "BasicProfileInfo"
});
type UserInfoForm = User;
const route = useRoute();
const tabStore = useTabsStore();
const keepAliveStore = useKeepAliveStore();
const ruleFormRef = ref<FormInstance>();
const userInfoForm: UserInfoForm = reactive({} as UserInfoForm);

const props = defineProps({
  user: {
    type: Object
  }
});

const emits = defineEmits(["updataUser"]);
/**
 * @description 规则校验
 */
const rules = reactive<FormRules<typeof userInfoForm>>({
  nickName: [{ min: 2, max: 10, message: "长度在 2 到 10 个字符", trigger: "blur" }],
  phone: [
    { required: true, message: "请输入手机号", trigger: "blur" },
    { validator: phoneVerify, trigger: "blur" }
  ],
  email: [{ validator: emailVerify, trigger: "blur" }]
});

// 性别选项
const options = ref([
  { label: "男", value: "0" },
  { label: "女", value: "1" },
  { label: "未知", value: "2" }
]);

onMounted(() => {
  initUserInfo();
});

/**
 * @description 初始化用户信息
 */
const initUserInfo = async () => {
  // Object.assign(userInfoForm, props.user);
};

watch(
  () => props.user,
  (newVal) => {
    if (newVal) {
      Object.assign(userInfoForm, props.user);
    }
  }
);

/**
 * @description 保存用户信息
 */
const saveUserInfoHandler = (ruleForm: FormInstance | undefined) => {
  try {
    if (!ruleForm) return false;
    ruleForm.validate(async (valid: boolean) => {
      if (!valid) {
        ElMessage.error("请填写正确的表单信息进行提交");
        return false;
      }
      const res = await editUserProfileApi(userInfoForm);
      if (res.code !== 200) {
        return ElMessage.error(res.message);
      }
      ElMessage.success("修改用户信息成功");
      initUserInfo();
      emits("updataUser");
    });
  } catch (error) {
    console.error("修改用户信息失败");
  }
};

/**
 * @description 关闭
 */
const closeHandler = () => {
  const fullPath = route.fullPath;
  const name = tabStore.tabsMenuList.filter((item) => item.path == fullPath)[0].name || "";
  keepAliveStore.removeKeepAliveName(name);
  tabStore.closeTab(fullPath as string, true);
};
</script>

<style scoped lang=""></style>
